<template>
  <div>
    <el-form :inline="true" :model="selectLogInforPage" class="demo-form-inline">
      <el-form-item label="登陆地址">
        <el-input v-model="selectLogInforPage.ipaddr" placeholder="登陆地址"></el-input>
      </el-form-item>
      <el-form-item label="用户名称">
        <el-input v-model="selectLogInforPage.username" placeholder="用户名称"></el-input>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="selectLogInforPage.status" placeholder="状态" clearable>
          <el-option label="成功" value="0"></el-option>
          <el-option label="失败" value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="登陆时间">
        <div class="block">
          <el-date-picker
              v-model="selectLogInforPage.loginTimeRange"
              type="datetimerange"
              value-format="yyyy-MM-dd HH:mm:ss"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              unlink-panels
             >
          </el-date-picker>
        </div>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
    <el-button type="warning" @click="outExe">导出</el-button>
    <el-button   @click="batchDelete" type="warning" :disabled="deleteDisabled">删除</el-button>
    <el-button  type="primary">清空</el-button>
    <el-button @click="toggleSelection()">取消选择</el-button>
    <el-table
        ref="multipleTable"
        :data="logInforPage"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        id="enableExportExcel"
    >
      <el-table-column
          type="selection"
          width="55">
      </el-table-column>
      <el-table-column
          label="访问编号"
          width="120">
        <template slot-scope="scope">{{ scope.row.infoId}}</template>
      </el-table-column>
      <el-table-column
          prop="username"
          label="用户名称"
          width="120">
        <template slot-scope="scope">{{ scope.row.userName}}</template>
      </el-table-column>
      <el-table-column
          prop="ipaddr"
          label="登陆地址"
          width="120">
        <template slot-scope="scope">{{ scope.row.ipaddr}}</template>
      </el-table-column>
      <el-table-column
          prop="username"
          label="浏览器"
          width="120">
        <template slot-scope="scope">{{ scope.row.browser}}</template>
      </el-table-column>
      <el-table-column
          prop="username"
          label="操作系统"
          width="120">
        <template slot-scope="scope">{{ scope.row.os}}</template>
      </el-table-column>
      <el-table-column
          prop="username"
          label="登录状态"
          width="120">
        <template slot-scope="scope">{{ scope.row.status}}</template>
      </el-table-column>
      <el-table-column
          prop="username"
          label="操作信息"
          width="120">
        <template slot-scope="scope">{{ scope.row.msg}}</template>
      </el-table-column>
      <el-table-column
          prop="username"
          label="登录日期"
          width="200">
        <template slot-scope="scope">{{ scope.row.loginTime}}</template>
      </el-table-column>
    </el-table>
    <div style="margin-top: 20px">
<!--      <el-button @click="toggleSelection([logInforPage[1], logInforPage[2]])">切换第二、第三行的选中状态</el-button>-->

    </div>
    <div class="block">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="current"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import FileSaver from "file-saver";
import * as XLSX from "xlsx";

export default {
  data() {
    return {
      //单个登录日志对象
      LogInfor:{
        //访问ID
        infoId:'',
        //用户账号
        userName:'',
        // 登录ip地址
        ipaddr:'',
        // 登录地点
        loginLocation:'',
        // 浏览器
        browsers:'',
        os:'',
        status:'',
        msg:'',
        loginTime:''
      },
      // 当前第几页
      current:1,
      //一页有几行
      size:5,
      //一共有几条数据
      total:0,
      //模糊查询条件变量
      selectLogInforPage:{
        ipaddr:'',
        username:'',
        status:'',
        loginTimeRange:'',
        loginTimeRangeStart:'',
        loginTimeRangeEnd:'',
      },
      //分页数据
      logInforPage:null,
      //表格复选框标签
      multipleSelection: [],
      // 删除按钮是否隐藏的变量
      deleteDisabled:true,
      // 复选框选中的Id
      multipleSelectionSysLoginInforIds:[]
    }
  },

  methods: {

    handleSizeChange(val) {
      this.size=val
      this.loadLogInforPage()
    },
    handleCurrentChange(val) {
      this.current=val
      this.loadLogInforPage()
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;

      //保存操作日志ID
      this.multipleSelectionSysLoginInforIds=[]
      for (const multipleSelectionElement of this.multipleSelection) {
        this.multipleSelectionSysLoginInforIds.push(multipleSelectionElement.infoId)
      }

      if (this.multipleSelection.length>0){
        //  可见
        this.deleteDisabled=false
      }else {
        // 不可见
        this.deleteDisabled=true
      }
      if (this.multipleSelection.length==1){
        //  可见
        this.updateDisabled=false
      }else {
        // 不可见
        this.updateDisabled=true
      }

    },
    loadLogInforPage(){
      this.axios.get("/sysLoginInfor/page?current="+this.current
          +"&size="+this.size
          +"&ipaddr="+this.selectLogInforPage.ipaddr
          +"&userName="+this.selectLogInforPage.username
          +"&status="+this.selectLogInforPage.status
          +"&loginTimeRangeStart="+this.selectLogInforPage.loginTimeRangeStart
          +"&loginTimeRangeEnd="+this.selectLogInforPage.loginTimeRangeEnd
      )
          .then(result=>{
            this.logInforPage=result.data.data.records
            this.total=result.data.data.total
          })

    },
    onSubmit() {
      this.selectLogInforPage.loginTimeRangeStart=''
      this.selectLogInforPage.loginTimeRangeEnd=''
      if ( this.selectLogInforPage.loginTimeRange!=null&&this.selectLogInforPage.loginTimeRange.length!=0){
        this.selectLogInforPage.loginTimeRangeStart=this.selectLogInforPage.loginTimeRange[0]
        this.selectLogInforPage.loginTimeRangeEnd=this.selectLogInforPage.loginTimeRange[1]
      }
      this.loadLogInforPage()
    },
    //   导出表格数据为Excel
    //导出excel表格
    outExe() {
      this.$confirm("此操作将导出excel文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
          .then(() => {
            this.excelData = this.deptList; //你要导出的数据list。
            this.exportExcel();
          })
          .catch(() => {
          });
    },
    exportExcel() {
      //转换成excel时，使用原始的格式
      var xlsxParam = {raw: true};
      let fix = document.querySelector(".el-table__fixed");
      let wb;
      //判断有无fixed定位，如果有的话去掉，后面再加上，不然数据会重复
      if (fix) {
        wb = XLSX.utils.table_to_book(
            document.querySelector("#enableExportExcel").removeChild(fix), xlsxParam);
        document.querySelector("#enableExportExcel").appendChild(fix);
      } else {
        wb = XLSX.utils.table_to_book(document.querySelector("#enableExportExcel"), xlsxParam);
      }
      var wbout = XLSX.write(wb, {
        bookType: "xlsx",
        bookSST: true,
        type: "array",
      });
      try {
        FileSaver.saveAs(new Blob([wbout], {type: "application/octet-stream"}), "导出详情单.xlsx");
      } catch (e) {
        if (typeof console !== "undefined") console.log(e, wbout);
      }
      return wbout;
    },
    // 批量删除
    batchDelete() {
      this.axios.delete("/sysLoginInfor/batchDelete/"+this.multipleSelectionSysLoginInforIds)
          .then(result=>{
            this.current=1
            this.loadLogInforPage()
          })

    },

  },

  mounted() {
    this.loadLogInforPage()
  }
}
</script>